<template>
  <div class="left-center">
    <div class="inner-top">
      <div ref="echartsContainer" style="width: 400px; height: 300px;"></div>
      <div class="inner-title">
        {{ type === 'A类' ? '通过考生占比' : '及格考生占比' }}
      </div>
    </div>
    <div class="inner-top">
      <div ref="echartsContainer2" style="width: 400px; height: 300px;"></div>
      <div class="inner-title">
        考生专业占比
      </div>
    </div>
    <div class="inner-top">
      <div ref="echartsContainer3" style="width: 400px; height: 300px;"></div>
      <div class="inner-title">
        考生年龄占比
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { queryDeptPercent, queryAgePercent, unPassCountAndPercent } from '@/api/driver.js'

export default {
  data () {
    return {
      config: {
        value: 80,
        localGradient: true
      },
      recordsId: '',
      type: ''
    }
  },
  mounted () {
    this.recordsId = this.$route.query.recordsId
    this.type = this.$route.query.type
    this.getUnPassCountAndPercent()
    this.getMajorPercent()
    this.getAgePercent()
  },
  methods: {
    getUnPassCountAndPercent111 () {
      unPassCountAndPercent({ recordsId: this.recordsId }).then(res => {
        let obj = res.data.data[0].passStudentPercent
        var myChart = echarts.init(this.$refs.echartsContainer)
        myChart.setOption({
          grid: {
            top: '0%',
            left: '10%',
            right: '10%',
            bottom: '0%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false
          },
          series: [
            {
              name: '通过考生占比',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '50%'],
              startAngle: 0,
              endAngle: 360,
              data: [
                {
                  value: Number(obj).toFixed(2),
                  name: '通过',
                  itemStyle: {
                    borderColor: '#01AAFF60',
                    borderRadius: 10,
                    borderWidth: 2,
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0, color: '#00fdfa'
                        },
                        {
                          offset: 1, color: '#01AAFF'
                        }
                      ],
                      global: false
                    }
                  }
                },
                {
                  value: (1 - Number(obj).toFixed(2)).toFixed(2),
                  name: '不通过',
                  itemStyle: {
                    borderColor: '#01AAFF60',
                    borderRadius: 10,
                    borderWidth: 2,
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0, color: '#ff5a92'
                        },
                        {
                          offset: 1, color: '#E91E63'
                        }
                      ],
                      global: false
                    }
                  }
                }
              ],
              // 折现图样式
              label: {
                // 文字部分 显示内容为{b}：{c}可以换自己像显示的
                // 最外面的{a|}必要，不然位置有偏差，可以根据rich a微调
                // {hr|}为圆点显示内容
                formatter: '{a|{b}：{c}}\n{hr|}',
                // 折线图文字颜色
                color: '#01AAFF',
                rich: {
                  // 圆点位置大小配置
                  hr: {
                    // auto自定义
                    backgroundColor: 'auto',
                    borderRadius: 3,
                    width: 3,
                    height: 3,
                    padding: [3, 3, 0, -12]
                  },
                  a: {
                    padding: [-12, 10, -20, 15]
                  }
                }
              },
              avoidLabelOverlap: false,
              itemStyle: {
                normal: {

                }
              },
              labelLine: {
                show: false
              }
            }
          ]
        })
      })
    },
    getUnPassCountAndPercent () {
      unPassCountAndPercent({ recordsId: this.recordsId }).then(res => {
        let obj = res.data.data[0].passStudentPercent
        let data = [
          {
            value: Number(obj).toFixed(2),
            name: '通过'
          },
          {
            value: (1 - Number(obj).toFixed(2)).toFixed(2),
            name: '不通过'
          }
        ]
        var myChart = echarts.init(this.$refs.echartsContainer)
        myChart.setOption({
          grid: {
            top: '100%',
            left: '10%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false
          },
          series: [
            {
              name: '通过考生占比',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '50%'],
              startAngle: 0,
              endAngle: 360,
              data: data,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 20
                  }
                }
              },
              itemStyle: {
                normal: {
                  label: {
                    textStyle: {
                      color: '#01AAFF'
                    }
                  }
                }
              }
            }
          ]
        })
      })
    },
    getMajorPercent () {
      queryDeptPercent({recordsId: this.recordsId}).then(res => {
        let data = []
        res.data.data.map(item => {
          data.push({
            value: Number(item.deptNameCountPercent).toFixed(2),
            name: item.deptName || '暂无'
          })
        })
        var myChart2 = echarts.init(this.$refs.echartsContainer2)
        myChart2.setOption({
          grid: {
            top: '100%',
            left: '10%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false
          },
          series: [
            {
              name: '考生专业占比',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '50%'],
              startAngle: 0,
              endAngle: 360,
              data: data,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 20
                  }
                }
              },
              itemStyle: {
                normal: {
                  label: {
                    textStyle: {
                      color: '#01AAFF'
                    }
                  }
                }
              }
            }
          ]
        })
      })
    },
    getAgePercent () {
      queryAgePercent({recordsId: this.recordsId}).then(res => {
        let data = []
        res.data.data.map(item => {
          data.push({
            value: Number(item.agePercent).toFixed(2),
            name: item.age || '暂无'
          })
        })
        var myChart3 = echarts.init(this.$refs.echartsContainer3)
        myChart3.setOption({
          grid: {
            top: '100%',
            left: '10%',
            right: '10%',
            bottom: '10%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false
          },
          series: [
            {
              name: '通过考生占比',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '50%'],
              startAngle: 0,
              endAngle: 360,
              data: data,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 20
                  }
                }
              },
              itemStyle: {
                normal: {
                  label: {
                    textStyle: {
                      color: '#01AAFF'
                    }
                  }
                }
              }
            }
          ]
        })
      })
    }
  }
}
</script>

<style lang='scss'>
  .left-center{
    height: 750px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    color: rgba(84,197,239,1);
    .inner-top{
      height: 33%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .inner-title{
        font-size: 22px;
      }
    }
    
    .inner-middle{
      height: 33%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .inner-title{
        font-size: 22px;
      }
    }
  }
</style>